<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			float: left;
			overflow: hidden;
			width: 100px;
			height: 100px;
			background-color: skyblue;
			/* margin: 30px auto; */
			margin: 40px;
		}

		div::before {
			content: '你好啊！';
			/* 之前的案例不用转换为块模式是因为添加了定位的原因 */
			display: block;
			width: 100%;
			height: 100%;
			background-color: yellow;
			transform: rotate(180deg);
			transform-origin: left bottom;
			transition: all 0.3s;
		}

		div:hover::before {
			/* 这里直接设置角度为0  就可以实现还原效果了 */
			transform: rotate(0deg);
		}
	</style>
</head>

<body>
	<h2>这个案例看出实现一个简单动画 只需要一个简单的div就可以了 如果需要多个直接复制多个div设置到一类里</h2>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>

</html>